<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 订单出库 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="内单号">
                        <el-input v-model="searchSet.code" prefix-icon="el-icon-search" clearable placeholder="请输入搜索信息"></el-input>
                    </el-form-item>

                    <el-form-item label="发货起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="客户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入用户Code"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="searchSet.orderStatus" placeholder="选择状态" clearable>
                            <el-option
                                v-for="item in orderStatusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经手人">
                        <el-input
                            v-model="searchSet.sendUserName"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table :data="tableData" v-loading="tableLoading" border class="table" ref="mainTable" :row-class-name="tableRowClassName">
                <el-table-column prop="appusercode" label="客户代码" align="center" />
                <el-table-column prop="channelname" label="发货渠道" align="center" width="130" />
                <el-table-column prop="nationname" label="收货国家" align="center" />
                <el-table-column prop="code" label="内单号" align="center" />
                <el-table-column prop="totalcount" label="件数" align="center" width="60" />
                <el-table-column prop="totalweight" label="出重" align="center" width="60" />
                <el-table-column prop="price" label="支付金额" align="center" width="80" />

                <el-table-column prop="paytime" label="支付时间" width="100" align="center" />
                <el-table-column label="支付状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': orderPayOption[scope.row.ispayed] ? orderPayOption[scope.row.ispayed].color : '#909399'
                            }"
                        >
                            {{ orderPayOption[scope.row.ispayed] ? orderPayOption[scope.row.ispayed].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': orderStatusOption[scope.row.orderstatus]
                                    ? orderStatusOption[scope.row.orderstatus].color
                                    : '#909399'
                            }"
                        >
                            {{ orderStatusOption[scope.row.orderstatus] ? orderStatusOption[scope.row.orderstatus].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sendusername" label="经手人" align="center" />
                <el-table-column prop="sendtime" label="发货时间" width="100" align="center" />
                <el-table-column prop="outnumber" label="追踪单号" align="center"
                    ><template slot-scope="scope">
                        <a href="javascript:void" @click.stop.prevent="handleExpress(scope.$index, scope.row)">{{ scope.row.outnumber }}</a>
                        <el-button v-if="scope.row.outnumber" @click.stop.prevent="handleExpress(scope.$index, scope.row)"
                            >一键追踪</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                        <!-- <el-button
                            v-if="Number(scope.row.orderstatus) == 3 && Number(scope.row.ispayed) == 0"
                            type="text"
                            icon="el-icon-s-claim"
                            @click="handlePay(scope.$index, scope.row)"
                            >清账</el-button
                        > -->
                        <el-button
                            v-if="
                                (Number(scope.row.orderstatus) == 3 || Number(scope.row.orderstatus) == 4) && Number(scope.row.ispayed) == 1
                            "
                            type="text"
                            icon="el-icon-truck"
                            @click="handleDeliver(scope.$index, scope.row)"
                            >发货</el-button
                        >
                        <el-button type="text" icon="el-icon-s-order" @click="handleErrorDetail(scope.$index, scope.row)"
                            >问题处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="发货操作" v-dialogDrag center :visible.sync="editVisible" width="700px">
            <el-form ref="form" size="mini" :model="form" :rules="formRules" label-width="200px">
                <el-form-item label="内单号" prop="code">
                    <el-input
                        v-model="form.code"
                        placeholder="请输入内单号"
                        maxlength="30"
                        show-word-limit
                        disabled
                        class="formInput"
                    ></el-input>
                </el-form-item>
                <el-form-item label="件数" prop="totalcount">
                    <el-input
                        v-model="form.totalcount"
                        placeholder="请输入件数"
                        maxlength="10"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
                <el-form-item label="总重量" prop="totalweight">
                    <el-input
                        v-model="form.totalweight"
                        placeholder="请输入总重量"
                        maxlength="10"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
                <el-form-item label="代理选择" prop="cascaderValue">
                    <el-cascader
                        ref="cascader"
                        :props="postAgentCourier"
                        v-if="editVisible"
                        placeholder="请选择快递"
                        clearable
                        style="width: 100%"
                        v-model="form.cascaderValue"
                    ></el-cascader>
                </el-form-item>
                <div class="FlexRow">
                    <el-form-item label="成本价格(¥)" prop="localagentprice" label-width="200px">
                        <el-input
                            v-model="form.localagentprice"
                            @input="InputLocalAgentPrice"
                            placeholder="请输入成本价格"
                            maxlength="10"
                            show-word-limit
                            clearable
                            class="formInput"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="($)" prop="agentprice" label-width="50px">
                        <el-input
                            v-model="form.agentprice"
                            @input="InputAgentPrice"
                            placeholder="请输入成本价格"
                            maxlength="10"
                            show-word-limit
                            clearable
                            class="formInput"
                        ></el-input>
                    </el-form-item>
                </div>

                <el-form-item label="汇率" prop="agentcurrencychangerate">
                    <el-input v-model="form.agentcurrencychangerate" disabled class="formInput"></el-input>
                </el-form-item>

                <el-form-item label="追踪单号" prop="outnumber">
                    <el-input
                        v-model="form.outnumber"
                        placeholder="请输入追踪单号"
                        maxlength="30"
                        show-word-limit
                        clearable
                        class="formInput"
                    ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureDeliver">确 定</el-button>
                <el-button type="primary" @click="exportShippment">导出出货面单</el-button>
                <el-button type="primary" @click="exportTag">导出快递标签</el-button>
                <el-button type="primary" @click="exportInvoice">导出发票</el-button>
            </span>
        </el-dialog>
        <el-dialog title="清账操作" v-dialogDrag center :visible.sync="payVisible" width="600px">
            <el-form ref="payform" size="mini" :model="payform" :rules="payformRules" label-width="200px">
                <el-descriptions :column="1" style="margin-bottom: 20px" border>
                    <el-descriptions-item label="内单号">
                        {{ payform.code }}
                    </el-descriptions-item>
                    <el-descriptions-item label="价格"> ${{ payform.price }} </el-descriptions-item>
                    <el-descriptions-item label="到付金额"> ${{ payform.freightprice }} </el-descriptions-item>
                    <el-descriptions-item label="用户编码">
                        {{ payform.usercode }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户姓名">
                        {{ payform.username }}
                    </el-descriptions-item>
                    <el-descriptions-item label="账号余额" :span="2">
                        <template v-if="payform.useraccounts && payform.useraccounts.length > 0">
                            <div v-for="(item, index) in payform.useraccounts" :key="index" class="FlexRowVCenter">
                                <div>{{ item.currencyname }}:</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </template>
                        <div v-else>暂无余额</div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="payVisible = false">取 消</el-button>
                <el-button type="primary" @click="surePay">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="快递轨迹查询" v-dialogDrag center :visible.sync="expressVisible" width="800px">
            <el-descriptions :column="1" style="margin-bottom: 20px" border size="mini">
                <el-descriptions-item label="内单号">
                    {{ expressform.code }}
                </el-descriptions-item>
                <el-descriptions-item label="快递名称"> {{ expressform.couriername }} </el-descriptions-item>
                <el-descriptions-item label="快递单号"> {{ expressform.outnumber }} </el-descriptions-item>
            </el-descriptions>
            <el-table :data="expressform.status" style="width: 100%" stripe border height="400">
                <el-table-column prop="addtime" label="时间" width="180"> </el-table-column>
                <el-table-column prop="location" label="状态" min-width="180"> </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="expressVisible = false">取 消</el-button>
                <el-button type="primary" @click="expressVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType" width="90%">
            <template slot="details">
                <template v-for="(item, index) in detailInfo.details">
                    <el-descriptions-item :key="index" :label="`包裹${index + 1}`" :span="2">
                        <div class="FlexRowWarp">
                            <div class="Dialog_Desc_Item">品名：{{ item.packageName }}</div>
                            <div class="Dialog_Desc_Item">快递单号：{{ item.expressnumber }}</div>
                            <div class="Dialog_Desc_Item">包裹编号：{{ item.packageCode }}</div>
                            <div class="Dialog_Desc_Item">货架位置：{{ item.location }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.payedprice">到付金额：${{ item.payedprice }}</div>
                            <div class="Dialog_Desc_Item">数量：{{ item.count }}个</div>
                            <div class="Dialog_Desc_Item">重量：{{ item.weight }}kg</div>
                        </div>
                    </el-descriptions-item>
                </template>
            </template>
            <template slot="boxs" v-if="detailInfo.postedDetails && detailInfo.postedDetails.details">
                <el-descriptions-item :span="2" label="打包箱信息" :contentStyle="{ padding: 0 }">
                    <el-table :data="detailInfo.postedDetails.details" style="width: 100%" stripe border size="mini" show-summary>
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="weight" label="重量" align="center" width="60" />
                        <el-table-column prop="length" label="长度(cm)" align="center" width="75" />
                        <el-table-column prop="width" label="宽度(cm)" align="center" width="75" />
                        <el-table-column prop="height" label="高度(cm)" align="center" width="75" />
                        <el-table-column prop="volume" label="体积(m³)" align="center" width="70" />
                        <el-table-column prop="volumeweight" label="体积·重" align="center" width="70" />
                        <el-table-column prop="overlengthprice" label="超长费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="overweightprice" label="超重费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="oversizeprice" label="超周长费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="vacuumprice" label="真空袋费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="paperprice" label="纸箱费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="boxprice" label="打木箱费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="bounceprice" label="珍珠棉包材费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="sueprice" label="保险费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="customprice" label="实际价值" align="center" :formatter="formatMoney" />
                        <el-table-column prop="packAddPrice" label="包装附加手续费" align="center" :formatter="formatMoney" width="110" />
                        <el-table-column prop="remotePrice" label="偏远地区附加费" align="center" :formatter="formatMoney" width="110" />
                        <el-table-column prop="price" label="箱子合计费用" align="center" :formatter="formatMoney" />
                    </el-table>
                </el-descriptions-item>
                <template v-for="(item, index) in detailInfo.postedDetails.details">
                    <el-descriptions-item :key="index" :label="`第${index + 1}个打包箱`" :span="2">
                        <!-- <div class="FlexRowWarp" >
                            <div class="Dialog_Desc_Item">重量：{{ item.weight }}kg</div>
                            <div class="Dialog_Desc_Item">长度：{{ item.length }}cm</div>
                            <div class="Dialog_Desc_Item">宽度：{{ item.width }}cm</div>
                            <div class="Dialog_Desc_Item">高度：{{ item.height }}cm</div>
                            <div class="Dialog_Desc_Item">体积·重：{{ item.volumeweight }}</div>
                            <div class="Dialog_Desc_Item">超长费：${{ item.overlengthprice }}</div>
                            <div class="Dialog_Desc_Item">超重费：${{ item.overweightprice }}</div>
                            <div class="Dialog_Desc_Item">超周长费：${{ item.oversizeprice }}</div>

                            <div class="Dialog_Desc_Item">真空袋费：${{ item.vacuumprice }}</div>
                            <div class="Dialog_Desc_Item">纸箱费：${{ item.paperprice }}</div>
                            <div class="Dialog_Desc_Item">打木箱费：${{ item.boxprice }}</div>
                            <div class="Dialog_Desc_Item">珍珠棉包材费：${{ item.bounceprice }}</div>
                            <div class="Dialog_Desc_Item">保险费：${{ item.sueprice }}</div>
                            <div class="Dialog_Desc_Item">实际价值：${{ item.customprice }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.hasPackAddPrice">包装附加手续费：${{ item.packAddPrice }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.hasRemote">偏远地区附加费：${{ item.remotePrice }}</div>
                            <div class="Dialog_Desc_Item">是否带电：{{ item.hasElectrified ? '是' : '否' }}</div>
                            <div class="Dialog_Desc_Item">包裹数量：{{ item.count }}</div>
                            <div class="Dialog_Desc_Item">箱子合计费用：${{ item.price }}</div>
                        </div> -->
                        <div class="FlexRowWarp Dialog_Desc_Package" v-for="(packitem, packindex) in item.packages" :key="packindex">
                            <div class="Dialog_Desc_Label Dialog_Desc_Item">【包裹{{ packindex + 1 }}】</div>
                            <div class="Dialog_Desc_Item">品名：{{ packitem.packageName }}</div>
                            <div class="Dialog_Desc_Item">快递单号：{{ packitem.expressnumber }}</div>
                            <div class="Dialog_Desc_Item">包裹编号：{{ packitem.packageCode }}</div>
                            <div class="Dialog_Desc_Item">货架位置：{{ packitem.location }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.payedprice">到付金额：${{ packitem.payedprice }}</div>
                            <div class="Dialog_Desc_Item">数量：{{ packitem.count }}个</div>
                            <div class="Dialog_Desc_Item">重量：{{ packitem.weight }}kg</div>
                        </div>
                    </el-descriptions-item>
                </template>
                <el-descriptions-item label="订单总金额"> ${{ detailInfo.postedDetails.price }} </el-descriptions-item>
                <el-descriptions-item label="备注">
                    {{ detailInfo.postedDetails.remark }}
                </el-descriptions-item>
            </template>
        </detailDialog>
        <el-dialog title="问题件处理" :visible.sync="errorVisible" width="60%">
            <el-form ref="errorform" size="mini" :inline="true" :model="errorform">
                <el-descriptions :column="2" size="mini" :labelStyle="{ width: '150px' }" :contentStyle="{ 'min-width': '100px' }" border>
                    <el-descriptions-item label="内单号">{{ errorform.code }}</el-descriptions-item>
                    <el-descriptions-item label="追踪单号">{{ errorform.outnumber }}</el-descriptions-item>
                    <el-descriptions-item label="品名">{{ errorform.name }}</el-descriptions-item>
                    <el-descriptions-item label="目的地">{{ errorform.address }}</el-descriptions-item>
                    <el-descriptions-item label="订单金额">${{ errorform.price }}</el-descriptions-item>
                    <el-descriptions-item label="处理时间">{{ errorform.addtime }}</el-descriptions-item>
                    <el-descriptions-item label="处理结果">{{ errorform.status == 1 ? '未完成' : '已完成' }}</el-descriptions-item>
                </el-descriptions>
                <template v-for="(item, index) in errorform.list">
                    <el-form-item label="问题描述" label-width="100px" :key="index">
                        <el-input
                            v-model="item.remark"
                            placeholder="请输入问题描述"
                            maxlength="100"
                            show-word-limit
                            disabled
                            class="formInput"
                            type="textarea"
                            style="width: 450px; margin: 15px 0"
                        ></el-input>
                        {{ item.addusername }} 时间:{{ item.addtime }}
                    </el-form-item>
                </template>
                <el-form-item label="处理描述" label-width="100px">
                    <el-input
                        v-model="errorform.newremark"
                        placeholder="请输入处理结果"
                        maxlength="100"
                        show-word-limit
                        clearable
                        class="formInput"
                        type="textarea"
                        style="width: 450px; margin: 15px 0"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" v-if="errorform.status == 1">
                    <el-checkbox v-model="errorform.isclosed">是否处理完成</el-checkbox>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="errorVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveError">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import dataTable from './dataTable';
import JSTool from '../../../utils/JSTool';
import detailDialog from '../../common/dialog/detailDialog.vue';
export default {
    name: 'packageDeliverTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        let CheckNumber = (rule, value, callback) => {
            if (!StringTool.PureNumber(String(value))) {
                return callback(new Error('只能为整数'));
            }
            if (Number(value) < 0) {
                return callback(new Error('只能为正数'));
            }
            callback();
        };
        let CheckDigit = (rule, value, callback) => {
            if (!StringTool.DigitNumber(String(value))) {
                return callback(new Error('只能为整数和保留两位小数'));
            }
            if (Number(value) < 0) {
                return callback(new Error('只能为正数'));
            }
            callback();
        };
        let CheckCascaderValue = (rule, value, callback) => {
            if (!(value instanceof Array)) {
                return callback(new Error('不合规范的参数'));
            }
            if (value.length < 2) {
                return callback(new Error('请选择代理商快递'));
            }
            callback();
        };

        return {
            agentcurrencychangerate: 0,
            agentcurrencychangerateid: '',
            searchSet: {
                code: '',
                startTime: '',
                endTime: '',
                orderStatus: '',
                userCode: '',
                userName: '',
                userMobile: '',
                sendUserName: ''
            },
            orderStatusOption: {
                1: { label: '申请打包', value: 1, color: '#ffb248' },
                2: { label: '发货待确认', value: 2, color: '#339ca8' },
                3: { label: '待发货', value: 3, color: '#eb8146' },
                4: { label: '已发货', value: 4, color: '#67C23A' },
                5: { label: '已签收', value: 5, color: '#626c91' },
                6: { label: '问题件', value: '6', color: '#626c91' }
            },
            orderPayOption: {
                0: { label: '未支付', value: '0', color: '#eb8146' },
                1: { label: '已支付', value: '1', color: '#67C23A' }
            },
            editVisible: false,
            payVisible: false,
            expressVisible: false,
            expressform: {
                expressid: '',
                code: '',
                couriername: '',
                outnumber: '',
                status: []
            },
            form: {},
            payform: {
                id: '',
                code: '',
                price: '',
                freightprice: '',
                usercode: '',
                username: '',
                useraccounts: []
            },
            formRules: {
                innernumber: [
                    { required: true, message: '参数不能为空', trigger: 'change' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'change' }
                ],
                outnumber: [
                    // { required: true, message: '参数不能为空', trigger: 'change' },
                    { min: 0, max: 30, message: '长度在 2 到 30 个字符', trigger: 'change' }
                ],
                totalcount: [{ validator: CheckNumber, required: true, trigger: 'change' }],
                totalweight: [{ validator: CheckDigit, required: true, trigger: 'change' }],
                agentprice: [{ validator: CheckDigit, required: true, trigger: 'change' }],
                localagentprice: [{ validator: CheckDigit, required: true, trigger: 'change' }],
                cascaderValue: [{ validator: CheckCascaderValue, required: true, trigger: 'change' }]
            },
            payformRules: {},
            detailVisible: false,
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 3, title: '基础信息' },
                    list: [
                        { label: '内单号', key: 'code' },
                        { label: '添加时间', key: 'addtime' },
                        { label: '通道名称', key: 'channelname' },
                        {
                            label: '订单状态',
                            key: 'orderstatus',
                            format: (r, v) => {
                                return this.orderStatusOption[v] ? this.orderStatusOption[v].label : '';
                            }
                        },
                        { label: '客户代码', key: 'appusercode', span: 2 }
                    ]
                },
                {
                    attrs: { column: 3, title: '收货信息' },
                    list: [
                        { label: '收货国家', key: 'nationname' },
                        { label: '收货地区', key: 'addressRegion' },
                        { label: '收货姓名', key: 'addressName' },
                        { label: '收货电话', key: 'addressContactnumber' },
                        {
                            label: '收货地址',
                            key: 'addressAddress',
                            span: 2,
                            format: (r, v) => {
                                return `${r.addressAddress} ${r.addressRegion}  ${r.nationname}`;
                            }
                        }
                    ]
                },
                {
                    attrs: { column: 3, title: '包裹信息', direction: 'vertical' },
                    if: () => {
                        return !this.detailInfo.postedDetails || !this.detailInfo.postedDetails.details;
                    },
                    list: [{ key: 'details', type: 'slot' }]
                },
                {
                    attrs: { column: 2, title: '出货信息', direction: 'vertical' },
                    if: () => {
                        return this.detailInfo.postedDetails && this.detailInfo.postedDetails.details;
                    },
                    list: [
                        { key: 'boxs', type: 'slot' }
                        // { label: "订单总金额", key: ["postedDetails", "price"] }, { label: "备注", key: ["postedDetails", "remark"] },
                    ]
                },
                {
                    attrs: { column: 2, title: '用户支付' },
                    list: [
                        {
                            label: '支付状态',
                            key: 'ispayed',
                            format: (r, v) => {
                                return this.orderPayOption[v] ? this.orderPayOption[v].label : '';
                            }
                        },
                        { label: '支付时间', key: ['userPay', 'paytime'] },
                        { label: '支付货币', key: ['userPay', 'currencyname'] },
                        { label: '支付金额', key: ['userPay', 'amount'] }
                    ]
                },
                {
                    attrs: { column: 2, title: '代理支付' },
                    list: [
                        {
                            label: '支付状态',
                            key: 'isagentpayed',
                            format: (r, v) => {
                                return this.orderPayOption[v] ? this.orderPayOption[v].label : '';
                            }
                        },
                        { label: '支付时间', key: ['agentPay', 'paytime'] },
                        { label: '支付货币', key: ['agentPay', 'currencyname'] },
                        { label: '支付金额', key: ['agentPay', 'amount'] }
                    ]
                },
                {
                    attrs: { column: 2, title: '发货信息' },
                    if: () => {
                        return this.detailInfo.outnumber;
                    },
                    list: [
                        { label: '发货代理', key: 'agentname' },
                        { label: '发货快递', key: 'couriername' },
                        { label: '成本价格($)', key: 'agentprice' },
                        { label: '追踪单号', key: 'outnumber' },

                        { label: '件数', key: 'totalcount' },
                        { label: '总重量', key: 'totalweight' },
                        { label: '发货时间', key: 'sendtime' }
                    ]
                }
            ],

            postAgentCourier: {
                lazy: true,
                lazyLoad: (node, resolve) => {
                    const { level } = node;
                    if (level == 0) {
                        return resolve(this.form.agents);
                    } else {
                        API.StandardDoWith(API.FindAgentCourier.Get({ agentId: node.data.value }), this, {
                            success: (detail) => {
                                detail.map((it) => {
                                    it.label = it.name;
                                    it.value = it.id;
                                    it.leaf = true;
                                });
                                return resolve(detail);
                            },
                            fail: () => {
                                return resolve([]);
                            }
                        });
                    }
                }
            },
            errorVisible: false,
            errorform: {
                id: '',
                code: '',
                name: '',
                outnumber: '',
                address: '',
                count: 0,
                remark: '',
                newremark: '',
                isclosed: false,
                price: 0,
                list: [],
                status: 1,
                addtime: ''
            }
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    watch: {},
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (row.orderstatus == 3) {
                return 'warning-row';
            } else if (row.orderstatus == 4) {
                return 'success-row';
            }
            return '';
        },
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.PackageDeliver.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.agentcurrencychangerate = detail.currencychangerate;
                    this.agentcurrencychangerateid = detail.currencychangerateid;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },

        handleDetail(index, row) {
            this.detailVisible = true;
            let obj = JSTool.DeepClone(row);

            // obj.details.map((item) => {
            //     item.images = MainTool.FileIdToUrl(item.images);
            //     item.videos = MainTool.FileIdToUrl(item.videos);
            // });
            if (obj.postedDetails && obj.postedDetails.details) {
                obj.postedDetails.details.map((box) => {
                    if (box.packages) {
                        box.packages.map((item) => {
                            obj.details.map((pack) => {
                                if (item.packageId === pack.packageId) {
                                    Object.assign(item, pack);
                                }
                            });
                        });
                    }
                    box.volume = ((Number(box.length) * Number(box.width) * Number(box.height)) / 1000000).toFixed(2);
                });
            }
            this.detailInfo = obj;
        },
        handleDeliver(index, row) {
            let agents = [];
            row.agents.map((it) => {
                agents.push({ label: it.agentName, value: it.agentId });
            });
            let obj = {
                id: row.id,
                code: row.code,
                agents,
                cascaderValue: [],
                outnumber: '',
                agentprice: '0',
                localagentprice: '0',
                totalcount: row.totalcount,
                totalweight: row.totalweight,
                agentcurrencychangerate: this.agentcurrencychangerate,
                agentcurrencychangerateid: this.agentcurrencychangerateid
            };
            if (row.outnumber) obj.outnumber = row.outnumber;
            if (row.agentprice) {
                obj.agentprice = row.agentprice;
                obj.localagentprice = (row.agentprice * this.agentcurrencychangerate).toFixed(2);
            }
            this.form = obj;
            this.$nextTick(() => {
                this.editVisible = true;
                this.$nextTick(() => {
                    if (row.agentid && row.courierid) {
                        this.form.cascaderValue = [row.agentid, row.courierid];
                        this.$refs.cascader.inputValue = row.agentname + ' / ' + row.couriername;
                    }
                });
            });
        },

        handlePay(index, row) {
            API.StandardDoWith(API.Appuser.Get({ userCode: row.appusercode }), this, {
                success: (detail) => {
                    console.log(detail);
                    this.payform = {
                        id: row.id,
                        code: row.code,
                        price: row.price,
                        freightprice: row.freightprice,
                        usercode: row.appusercode,
                        username: detail.list[0].name,
                        useraccounts: detail.list[0].accounts
                    };
                    console.log(this.payform.useraccounts);
                    this.$nextTick(() => {
                        this.payVisible = true;
                    });
                }
            });
        },

        // 保存编辑
        sureDeliver() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let postParam = {
                        agentid: this.form.cascaderValue[0],
                        courierid: this.form.cascaderValue[1],
                        id: this.form.id,
                        outnumber: this.form.outnumber,
                        agentprice: Number(this.form.agentprice),
                        agentcurrencychangerateid: this.form.agentcurrencychangerateid,
                        localagentprice: Number(this.form.localagentprice),
                        totalweight: Number(this.form.totalweight),
                        totalcount: Number(this.form.totalcount)
                    };

                    API.StandardDoWith(API.PackageDeliver.Post(postParam), this, {
                        success: (detail) => {
                            this.editVisible = false;
                            this.$message.success(`成功提交发货信息`);
                            this.getData();
                        }
                    });
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        surePay() {
            this.$refs.payform.validate((valid) => {
                if (valid) {
                    let postParam = {
                        id: this.payform.id
                    };
                    API.StandardDoWith(API.PackageDeliver.Put(postParam), this, {
                        success: (detail) => {
                            this.payVisible = false;
                            this.$message.success(`成功提交清账`);
                            this.getData();
                        }
                    });
                } else {
                    this.$message.error(`表单验证失败，无法提交`);
                    return false;
                }
            });
        },
        handleExpress(index, row) {
            this.expressVisible = true;

            this.expressform.expressid = row.expressid;
            this.expressform.code = row.code;
            this.expressform.couriername = row.couriername;
            this.expressform.outnumber = row.outnumber;
            API.StandardDoWith(API.OrderApplyExpressStatus.Get({ id: this.expressform.expressid }), this, {
                success: (detail) => {
                    this.expressform.status = detail;
                }
            });
            console.log(this.expressform);
        },
        InputLocalAgentPrice(v) {
            if (Number.isNaN(v / this.form.agentcurrencychangerate)) {
                this.form.agentprice = '0';
            } else {
                this.form.agentprice = (v / this.form.agentcurrencychangerate).toFixed(2);
            }
        },
        InputAgentPrice(v) {
            if (Number.isNaN(v * this.form.agentcurrencychangerate)) {
                this.form.localagentprice = '0';
            } else {
                this.form.localagentprice = (v * this.form.agentcurrencychangerate).toFixed(2);
            }
        },
        handleErrorDetail(index, row) {
            this.errorform.id = row.id;
            this.errorform.isclosed = false;
            this.errorform.newremark = '';
            API.StandardDoWith(API.OrderError.Get({ id: this.errorform.id }), this, {
                success: (detail) => {
                    console.log(detail);
                    this.errorform.code = detail.code;
                    this.errorform.name = detail.name;
                    this.errorform.count = detail.count;
                    this.errorform.outnumber = detail.outnumber;
                    this.errorform.remark = detail.remark;
                    this.errorform.address = detail.address;
                    this.errorform.list = detail.list;
                    this.errorform.addtime = detail.addtime;
                    this.errorform.status = detail.status;
                },
                complete: () => {
                    this.errorVisible = true;
                }
            });
        },
        saveError() {
            if (this.errorform.newremark) {
                API.StandardDoWith(
                    API.OrderError.Post({ id: this.errorform.id, remark: this.errorform.newremark, isclosed: this.errorform.isclosed }),
                    this,
                    {
                        success: (detail) => {
                            this.errorVisible = false;
                            this.$message.success(`成功提交问题件处理`);
                            this.getData();
                        },
                        complete: () => {}
                    }
                );
            }
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.OrderApplyExpressExport(), '订单出库数据.xlsx');
                })
                .catch((err) => {});
        },
        formatMoney(r, c, v, i) {
            return '$' + StringTool.FormatDigit(v);
        },
        exportShippment() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.ShippmentExport({ id: this.form.id }), '出货面单库数据.xlsx');
                })
                .catch((err) => {});
        },
        exportTag() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    let exporttotalcount = Number(this.form.totalcount);
                    console.log(exporttotalcount);
                    for (let i = 1; i <= exporttotalcount; i++) {
                        API.StandardDownFile(API.TagExport({ id: this.form.id, index: i }), '快递标签.xlsx');
                    }
                })
                .catch((err) => {});
        },
        exportInvoice() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.InvoiceExport({ id: this.form.id }), '发票.xlsx');
                })
                .catch((err) => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';

.RowLineSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: center;
}
.RowCell {
    flex: 1;
}
.Dialog_Desc_Item {
    margin: 3px 10px;
}
.Dialog_Desc_Package {
    border-top: #e4e7ed 2px dotted;
}
.Dialog_Desc_Item_Image {
    height: 80px;
    width: 80px;
    margin: 5px 5px;
    border: 2px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
</style>
